<%@ page contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery - ajax无刷新保存例子</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery/jquery.form.js"></script>
<script type="text/javascript">
 $(document).ready(function() { 
    var options = { 
        target:        '#output',    
		dataType:  'json', 
        beforeSubmit:  showRequest,  
        success:       showXYResponse  
    }; 

  $('#iForm').submit(function() { 
         $(this).ajaxSubmit(options); 
		 // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
        return false; 
    }); 
}); 

function showRequest(formData, jqForm, options) { 
     var queryString = $.param(formData);  
     alert('About to submit: \n\n' + queryString); 
    return true; 
} 

function showResponse(responseText, statusText)  { 
 alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
        '\n\nThe output div should have already been updated with the responseText.'); 
} 

function showXYResponse(data)  { 
     alert(data.message); 
} 

</script>
</head>
<body>
<div class="wrap">
<form id="iForm" name="iForm" method="post" action="jquery_ajax_post.jsp">
<input id="userId" name="userId" type="hidden" value="" />
<table width="400" border="0" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td width="90">用户名</td>
    <td><input value="" name="username" type="text" id="username" maxlength="16" valid="required" errmsg="用户名不能为空!" /></td>
  </tr>
  <tr>
    <td width="90">密码</td>
    <td><input name="passwd" type="password" id="passwd" maxlength="16"  valid="required" errmsg="密码不能为空!"  /></td>
  </tr>
  <tr>
    <td width="90">重复密码</td>
    <td><input name="passwd2" type="password" id="passwd2" maxlength="16" valid="eqaul" eqaulName="passwd" errmsg="两次密码不同!"  /></td>
  </tr>
  <tr>
    <td width="90">Email</td>
    <td><input value="" name="email" type="text" id="email" maxlength="50" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!" /></td>
  </tr>
   <tr>
    <td width="90">是否锁定</td>
    <td>
	        <input type="radio" name="locked" value="1">是
			<input type="radio" name="locked" value="0">否
	</td>
  </tr>
  <tr>
    <td width="90">爱好</td>
    <td>
	         <input type="checkbox" name="hobby" value="1">游泳
			 <input type="checkbox" name="hobby" value="2">打球
			 <input type="checkbox" name="hobby" value="3">电脑
			 <input type="checkbox" name="hobby" value="4">麻将
	</td>
  </tr>
   <tr>
    <td width="50">居住地</td>
    <td>
	          <select name="province">
			      <option value="北京">北京</option>
				  <option value="上海">上海</option>
				  <option value="广州">广州</option>
				  <option value="深圳">深圳</option>
			  </select>
	</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
	<input type="submit" value="Ajax Submit" />
	<input type="button" name="button" value="保存" class="button" onclick="javascript:ajaxPost();" />
	</td>
  </tr>
</table>
</form>
</div>
<div id="output"></div>
</body>
</html>